<template>
	<view class="fankuicreate">
		<headertop title="意见反馈" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<view class="fankuiback">

		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="fankuiyij">
			<view class="texts">
				<view class="t1">
					我们重视您的每一条建议
				</view>
				<view class="t2">
					您的反馈是我们不断优化产品的重要动力。如果您在使用过程中遇到问题或有任何建议，请随时告诉我们，我们将尽快处理并改进体验。
				</view>
			</view>
		</view>
		<view class="wentims">
			<view class="wentimstitle">
				<span style="color: #F53F3F;">*</span>
				问题描述
			</view>
			<view class="msinputs">
				<textarea v-model="formData['content']" cursor-spacing="100" auto-height placeholder="请输入问题描述" />
			</view>
		</view>
		<view class="wentims">
			<view class="wentimstitle">
				上传图片
			</view>
			<view class="tupians">
				<view class="image" v-for="(item,index) in images" :key="index">
					<image :src="item" mode=""></image>
					<image :src="_static('/images/删除.png')" @click="shanchu(images,index)" class="remivon" mode="">
					</image>
				</view>
				<image :src="_static('/images/微信图片_20250621104826.png')" v-if="images.length!=3" @click="uploadImage"
					class="uploadimg" mode=""></image>
			</view>
		</view>
		<view class="wentims">
			<view class="wentimstitle">
				<span style="color: #F53F3F;">*</span>
				手机号：
			</view>
			<view class="input">
				<input type="number" cursor-spacing="100" v-model="formData['phone']" placeholder="请留下您的手机号，方便我们联系您" />
			</view>
		</view>
		<view class="fixedbtn">
			<view class="btn" @click="tijiao">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		baseUrl
	} from '@/ulm/config';
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import {
		getToken
	} from '@/ulm/utils/auth.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	const statusBarHeight = ref('')
	const barHeight = ref('')
	import {
		$api
	} from '../../ulm';
	const formData = reactive({
		content: '',
		images: '',
		phone: ''
	})
	const images = ref([])

	function shanchu(arr, i) {
		arr.splice(i, 1)
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})

	async function tijiao() {
		if (!formData.content || !formData.phone) {
			uni.showToast({
				title: '问题描述和手机号不能为空',
				icon: 'none'
			})
			return
		}
		const reg1 = /^1[3-9]\d{9}$/;

		if (formData['phone']) {

			if (!reg1.test(formData['phone'])) {
				uni.showToast({
					title: '手机号格式错误',
					icon: 'none'
				})
				return
			}
		}
		formData['images'] = images.value.join()
		const res = await $api.feedbackadd(formData)
		if (res.code == 1) {
			uni.navigateBack()
			setTimeout(() => {
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				})
			}, 500)
		}
	}
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})

	function uploadImage() {
		uni.chooseImage({
			count: 3 - images.value.length, // 最多可选择图片数量
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
			success: (res) => {
				const validImages = res.tempFiles.filter(file => {
					return file.size <= 2 * 1024 * 1024; // 2MB = 2 * 1024 * 1024 Bytes
				});
				if (validImages.length === 0) {
					uni.showToast({
						title: `${res.tempFiles.length - validImages.length}张图片超过2MB`,
						icon: 'none'
					});
					return;
				}
				// tempFilePath 可以作为 img 标签的 src 属性显示图片
				const tempFilePaths = res.tempFilePaths
				uploadImages(tempFilePaths)
			},
			fail: (err) => {

			}
		})
	}

	function uploadImages(filePaths, str) {
		const uploadTasks = filePaths.map((filePath, index) => {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: `${baseUrl}/api/common/upload`,
					filePath: filePath,
					name: 'file',
					formData: {
						index: index // 可以添加序号标识
					},
					header: {
						token: getToken()
					},
					success: (uploadRes) => {
						resolve(JSON.parse(uploadRes.data))
					},
					fail: (err) => {
						reject(err)
					}
				})
			})
		})

		uni.showLoading({
			title: '上传中...'
		})

		Promise.all(uploadTasks)
			.then(results => {
				for (var i in results) {
					images.value.push(results[i]['data']['fullurl'])
				}
				uni.hideLoading()

				uni.showToast({
					title: `成功上传${results.length}张图片`,
					icon: 'success'
				})
			})
			.catch(err => {
				uni.hideLoading()
			})
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.fixedbtn {
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0%;
		margin: auto;
		margin-bottom: 92rpx;

		.btn {
			width: 686rpx;
			height: 88rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background: #2AB4F5;
			text-align: center;
			line-height: 88rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}

	.fankuicreate {
		width: 100%;
		overflow: hidden;
		position: relative;

		.fankuiback {
			width: 100%;
			height: 322rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.wentims {
			margin: auto;
			margin-top: 32rpx;
			width: 686rpx;
			overflow: hidden;

			.wentimstitle {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #1D2129;
			}

			.tupians {
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.uploadimg {
					width: 224rpx;
					height: 150rpx;
				}

				.image {
					width: 224rpx;
					height: 174rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					position: relative;
					margin-right: 30rpx;
					margin-bottom: 10rpx;

					image {
						width: 224rpx;
						height: 174rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						overflow: hidden;
					}

					.remivon {
						position: absolute;
						width: 30rpx;
						height: 30rpx;
						top: -6%;
						right: -6%;
						z-index: 9999;
					}
				}

			}

			.input {
				width: 100%;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				align-items: center;
				display: flex;
				margin-top: 20rpx;

				input {
					font-size: 28rpx;
					margin-left: 32rpx;
					width: 500rpx;

				}
			}

			.msinputs {
				width: 100%;
				overflow: hidden;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				height: 260rpx;
				margin-top: 20rpx;

				textarea {
					width: 630rpx;
					height: 230rpx;
					margin: auto;
					font-size: 28rpx;
					margin-top: 24rpx;
					line-height: 40rpx;
				}
			}
		}

		.fankuiyij {
			margin: auto;
			margin-top: 36rpx;
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			overflow: hidden;

			.texts {
				width: 632rpx;
				margin: auto;
				margin-top: 24rpx;
				margin-bottom: 12rpx;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #1D2129;
				}

				.t2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #86909C;
					margin-top: 10rpx;
					line-height: 44rpx;
				}
			}
		}
	}
</style>